import React, { useState, useEffect, useCallback } from 'react'

import { Table, Button, Row, Col, Rate, Input, Space } from 'antd'

import { useNavigate, useSearchParams } from 'react-router-dom'

const { Search } = Input;


import request, { baseUrl } from '../../../utils/request'




const Audit = () => {

    const navigate = useNavigate();
    // 分页功能
    const [urlParams, setUrlParams] = useSearchParams()
    const [keyword, setKeyword] = useState(urlParams.get('keyword') || '');
    const [params, setParams] = useState({
        // 解决数据类型为string引起的bug
        page: Number(urlParams.get('page')) || 1,
        size: Number(urlParams.get('size')) || 10
    })
    const [total, setTotal] = useState(0)


    // 设置初始数据
    const [datalist, setDatalist] = useState([]);




    const getData = async () => {
        // controller = new AbortController()
        const { data } = await request.get('/iq', {
            params,
            // signal: controller.signal
        })
        setDatalist(data.data.result)
        setTotal(data.data.total)
    }



    //数据搜索展示
    const onSearch = (value) => {
        console.log(value);
        setUrlParams(`keyword=${value}`);
        // 发起ajax请求，搜索商品
        // getData()

    }

    const changeChecked = async () => {
        const { data } = await request.get('/iq', {
            params,
            // signal: controller.signal
        })
        console.log(data.data.result);
        // setDatalist(data.data.result)
        // setTotal(data.data.total)

    }



    const columns = [
        {
            title: '#',
            key: '_id',
            render(text, record, index) {
                return index + 1
            }
        },
        {
            title: '面试题',
            dataIndex: 'question',
            render(text, record, index) {
                const { answer, hot, category, difficulty } = record
                return (
                    <>
                        <h3>{text}</h3>
                        {/* <p> */}
                        {
                            category ? <Button size='small' className='w_space'>{category}</Button> : <Button className='w_space' size='small' type="dashed">未分类 </Button>
                        }
                        <span className='w_space'>{hot}浏览 ·</span>
                        <span className='w_space'>{answer}回答 ·</span>
                        <span>难度：{<Rate disabled defaultValue={difficulty} />}</span>
                        {/* </p> */}
                    </>
                )
            }
        },
        {
            title: '审核',
            dataIndex: 'checked',
            width: 80,
            render(text, record, index) {
                return text == false ? <Button size='small' onClick={changeChecked}>未审</Button> : <Button size='small' type='primary'>已审</Button>
            }
        },
        {
            title: '时间',
            dataIndex: 'addtime',
            width: 120,
            render(text, record, index) {
                return text.slice(0, 10)
            }
        },
    ]
    //复选框功能
    const rowSelection = {
        onChange(selectedRowKeys) {
            console.log('selectedRowKeys=', selectedRowKeys)
            setSelectIds(selectedRowKeys)
        }
    }

    // 分页功能
    const pagination = {
        total,
        current: params.page,
        pageSize: params.size,
        size: 'small',
        onChange(page, size) {
            setParams({
                page,
                size
            })

            setUrlParams({
                page,
                size
            })
        }
    }

    //数据刷新
    useEffect(() => {
        getData();
    }, [params])


    return (
        <div>
            <Search
                placeholder="输入搜索内容"
                allowClear
                onSearch={onSearch}
                style={{
                    marginBottom: 20,
                }}
            />
            <Row gutter={20}>
                <Col span={8}>
                </Col>
                <Col span={16} className='text-right'>
                    <Space>
                        <Button size='small' type='primary'>批量审核</Button>
                        <Button danger ghost size='small' type='primary' className='audit_btn'>取消审核</Button>
                    </Space>
                </Col>
            </Row>
            <Table
                style={{ marginTop: 20 }}
                rowKey="_id"
                rowSelection={rowSelection}
                columns={columns}
                dataSource={datalist}
                pagination={pagination}
            />
        </div>

    )
}

export default Audit;